<template>
  <h1>useTrendsComp</h1>
  <f-button class="" @click="handleOpenA">useTrendsCompA</f-button>
  <f-button class="" @click="handleOpenB('AAAA')">useTrendsCompB</f-button>
  <f-button class="" @click="handleOpenB('BBBB')">useTrendsCompB</f-button>
  <f-button v-hotkey="{ keys: ['Shift','A'] }" @click="console.log('click', 'Shift','A')" disabled>hotkey</f-button>
  <f-button v-hotkey="{ keys: ['Shift','s'], callback: () => console.log('callback', 'Shift','s') }">hotkey</f-button>
  <a v-hotkey="{ keys: ['Shift','w'] }" href="www.baidu.com">hotkey</a>
</template>

<script setup>
import { ref, h, watch } from 'vue';
import { randomNum, randomStr } from 'fok-js';
import { useTrendsComp } from '../../packages/index';
// 需要打开的组件页面
import * as color from './color.vue';
import * as forms from './forms.vue';

const handleOpenA = () => {
  const id = randomNum(1, 100).toString();

  const { show, result, cancel } = useTrendsComp({
    key: '111122223333',
    // type: 'modal',
    type: 'drawer',
    title: randomStr(6),
    width: 'S',
    // component: color,
    component: forms,
    showButton: true,
    showMask: false,
    param: {
      id: id,
      guid: randomStr(8),
      zzCancel: () => {
        console.log('param:zzCancel');
        cancel();
      }
    },
    onClose: () => {
      console.log('on close');
    }
  });
  show().then((data) => {
    console.log(data);
  });
  watch(
    () => result.value,
    (data) => {
      console.log('watch:result', data);
      // cancel()
    }
  );
};
const handleOpenB = (keyStr) => {
  useTrendsComp({
    key: keyStr,
    type: 'modal',
    // type: "drawer",
    // title: 'select',
    title: randomStr(6),
    width: 'M',
    height: 500,
    // component: color,
    component: forms,

    // showButton: false,
    showMask: false,
    // maskClosable: true

    buttons: [
      { label: 'ok', click: (data) => new Promise((resolve) => {
        setTimeout(() => {
          console.log('then:result2', data);
          resolve();
        }, 1000 * 4);
      })
      },
      { label: 'close', click: (data) => data.cancel() }
    ],
    onClose: () => {
      console.log('on close');
    }
  })
    .show({ id: randomStr(3), guid: randomStr(8) })
    .then((data) => {
      console.log(data);
    });
};
</script>

<style lang="scss"></style>
